@(nav: String, tweetsJson: String, hotTweetsJson: String, page: Int, total: Int)(implicit request: RequestHeader)

@import helper._
@import utils.RequestHelper
@import play.api.libs.json.Json
@main(s"${app.Global.siteSetting.name} - 社区说说", "tweet") {
<div id="app" class="main layui-clear">
  <div class="wrap">
    <div class="content">
      <form id="tweet-form" class="layui-form">
        <div class="layui-form-item layui-form-text" style="margin-bottom: 0px;">
          <div class="layui-input-block" style="margin-left: 0px;">
            <textarea id="tweet" placeholder="发表说说" class="layui-textarea" rows="4" style="min-height:20px;"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block" style="margin-left: 0px;">
            <button class="layui-btn layui-btn-small" style="width: 100%; font-size: 15px;">发表说说</button>
          </div>
        </div>
      </form>

      <div class="fly-tab">
        <div class="layui-tab layui-tab-brief">
          <ul class="layui-tab-title">
            <li> <a href="/tweets" @if(nav == "0"){class="layui-this"}>最新说说</a> </li>
            <li> <a href="/tweets?nav=1" @if(nav == "1"){class="layui-this"}>热门说说</a> </li>
          </ul>
        </div>
        <i class="layui-icon fly-search">&#xe615;</i>
      </div>

      <ul class="fly-panel fly-list fly-list-top">
        <template v-for="(t, index) in tweets">
        <li class="fly-list-li" style="height: auto;padding-right: 10px;">
          <a :href="'/user/home?uid=' + t.author._id" class="fly-list-avatar">
            <img :src="t.author.headImg" alt="">
          </a>
          <span class="fly-tip">
            <a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}
          </span>
          <p>
            <span><a :href="'/tweet/view?_id=' + t._id">查看</a></span>
            <span>{{ t.time }}</span>
            <span class="fly-list-hint">
              <a :href="'/tweet/view?_id=' + t._id"><i class="iconfont" title="回答">&#xe60c;</i></a> {{ t.replyCount }}
              <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet"></i> {{ t.voteCount }}
            </span>
          </p>
        </li>
        </template>
      </ul>

      <div style="text-align: center">
        <div class="laypage-main">
          <a href="/tweets?page=@{page-1}" class="laypage-prev">上一页</a><span>@{page}/@{math.ceil(total/15.0).toInt}</span><a href="/tweets?page=@{page+1}" class="laypage-next">下一页</a></div>
      </div>

    </div>
  </div>

  <div class="edge">
    <div class="fly-panel">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 0px;">
        <ul class="layui-tab-title fly-panel-title">
          <li class="layui-this">热门说说</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0px;">
          <ul class="fly-panel fly-list">
            <template v-for="(t, index) in hotTweets">
              <li class="fly-list-li" style="padding: 2px 10px 2px 50px;height: auto;border-bottom: 0px;">
                <a :href="'/user/home?uid=' + t.author._id" class="fly-list-avatar" style="top: 0px;">
                  <img :src="t.author.headImg" alt="" style="width:30px;height:30px;">
                </a>
                <span><a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}</span>
                <p>
                  <span>{{ t.time }}</span>
                  <span class="fly-list-hint">
                    <a :href="'/tweet/view?_id=' + t._id"><i class="iconfont" title="回答">&#xe60c;</i></a> {{ t.replyCount }}
                    <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet"></i> {{ t.voteCount }}
                  </span>
                </p>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <div class="fly-panel fly-link">
      <h3 class="fly-panel-title">友情链接</h3>
      <dl>
        @for(l <- app.Global.siteSetting.links){
        <dd>
          <a href="@l.url" target="@l.target">@l.title</a>
        </dd>
        }
      </dl>
    </div>
  </div>
</div>
}

<script src="/assets/js/socket.io.js"></script>
<script src="/assets/js/vue.js"></script>
<script>
var token = '';
var app = new Vue({
  el: '#app',
  data: { tweets: @Html(tweetsJson), hotTweets: @Html(hotTweetsJson)}
});

var socket = io("/tweet");
socket.on('chat message', function(tweet) {
    app.tweets.unshift(JSON.parse(tweet));
});

$('#tweet-form').submit(function(){
  var tweet = $('#tweet').val();
  if($.trim(tweet) == ""){ return false; }
  $.ajax({
    type: 'post',
    dataType: 'json',
    data: {content: tweet, images: []},
    url: '/tweet/add?csrfToken=' + token,
    success: function(res){
      if(res.status === 0) {
        $('#tweet').val('');
        socket.emit('chat message', JSON.stringify(res.tweet));
      } else {
        layer.msg(res.msg||res.code);
      }
    }, error: function(e){
      layer.msg('请求异常，请重试');
    }
  });
  return false;
});

$(document).on('click', 'i.zan-resource', function(){
  var othis = $(this), resId = othis.attr('data-id'), resType = othis.attr('data-type');
  layui.fly.json('/resource/vote', {
    resId: resId
    ,resType: resType
    ,csrfToken: token
  }, function(res){
    for(i in app.tweets){
      if(app.tweets[i]._id == resId){
        app.tweets[i].voteCount += res.count;
      }
    }
    for(i in app.hotTweets){
      if(app.hotTweets[i]._id == resId){
        app.hotTweets[i].voteCount += res.count;
      }
    }
  });
});
</script>
